import React, { useEffect } from 'react'
import {useHistory} from 'react-router-dom'
import {Form, Input, Button, Checkbox} from 'antd'
import {useDispatch, useSelector} from 'react-redux'
import {handleToken} from '@/store2/actions'
import './style.scss'
const layout = {
  labelCol: {
    span: 6,
  },
  wrapperCol: {
    span: 15,
  },
};
const tailLayout = {
  wrapperCol: {
    offset: 6,
    span: 16,
  },
};

export default () => {
  const history = useHistory()
  const dispatch = useDispatch()
  const token = useSelector(store => store.user.token)
  //登录
  const onFinish = (values) => {
    dispatch(handleToken(values))
  };
  useEffect(() => {
    token && history.replace('/dash/article/list')
  })

  return (
    <div className="my-login">
      <div className="form">
        <Form
          {...layout}
          name="basic"
          colon={false}
          initialValues={{
            remember: true,
            pass: '123456'
          }}
          onFinish={onFinish}
        >
          <Form.Item
            label="用户名："
            name="user"
            help="buss / admin / shop"
            rules={[
              {
                required: true,
                message: '请输入用户名！',
              },
            ]}
          >
            <Input />
          </Form.Item>

          <Form.Item
            label="密码："
            name="pass"
            rules={[
              {
                required: true,
                message: '请输入你的密码！',
              },
            ]}
          >
            <Input.Password />
          </Form.Item>

          <Form.Item {...tailLayout} name="remember" valuePropName="checked">
            <Checkbox>记住 我</Checkbox>
          </Form.Item>

          <Form.Item {...tailLayout}>
            <Button type="primary" htmlType="submit">
              提交
            </Button>
          </Form.Item>
        </Form>
      </div>
    </div>
  )
}